<template>
    <div>
      <Card>
        <div>
          <vxe-button @click="$refs.xTree.setAllTreeExpansion(true)">展开所有</vxe-button>
          <vxe-button @click="$refs.xTree.clearTreeExpand()">关闭所有</vxe-button>
          <Input style="width: 200px;margin-left: 15px" :search="true" v-model="filterName" placeholder="请输入机构名称" @on-search="handleSearch"/>
        </div>
      </Card>
        <vxe-table
                resizable
                border
                ref="xTree"
                row-id="id"
                :row-key="true"
                :loading="tableLoading"
                show-overflow="tooltip"
                highlight-hover-row
                align="center"
                header-align="center"
                :data.sync="tableData"
                :tree-config="{children: 'children', expandAll: false, line: true}">
            <!--<vxe-table-column type="seq" width="200" title="序号" tree-node></vxe-table-column>-->
            <vxe-table-column header-align="center" align="left" width="25%" field="name" title="机构名称" tree-node>
            </vxe-table-column>
            <!--<vxe-table-column field="balance_price" title="预存余额" :visible="false" formatter="commafy"></vxe-table-column>-->
            <vxe-table-column field="code" title="机构编码"></vxe-table-column>
            <vxe-table-column field="gw_area_name" title="对应燃气报警器机构"></vxe-table-column>
            <vxe-table-column field="level" title="类型"></vxe-table-column>
            <vxe-table-column min-width="20%" title="操作">
                <template v-slot="{ row }">
                    <Button size="small" class="actionBtn" type="info" @click="update(row)">绑定管理</Button>
                </template>
            </vxe-table-column>
        </vxe-table>
      <Modal width="400" v-model="modal.show" :title="modal.title" @on-ok="updateOk">
        <Form label-position="top">
          <FormItem>
            <Select filterable placeholder="区县" v-model="area.id300" style="width:100%" @on-change="getCityList('400',area.id300)">
              <Option v-for="item in cityList300" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Select filterable placeholder="街道" v-model="area.id400" style="width:100%"  @on-change="getCityList('500',area.id400)">
              <Option v-for="item in cityList400" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem>
            <Select filterable placeholder="社区" v-model="areaList" multiple style="width:100%">
              <Option v-for="item in cityList500" :value="item.code" :key="item.code">{{ item.name }}</Option>
            </Select>
          </FormItem>
        </Form>
      </Modal>
    </div>
</template>

<script>
import { getAreaList, updateAreaBind, getGasWarnerAreaList, getAreaBindList } from '@/api/z-new-grid'

export default {
  name: 'companyList',
  props: {},
  data () {
    return {
      area: {
        id300: '',
        id400: ''
      },
      areaList: [],
      cityList300: [],
      cityList400: [],
      cityList500: [],
      originData: [],
      tableData: [],
      columns: [],
      tableLoading: false,
      filterName: '',
      row: {},
      modal: {
        title: '',
        show: false
      }
    }
  },
  mounted () {
    this.findList()
  },
  methods: {
    async updateOk () {
      await updateAreaBind({ company_code: this.row.code, areaList: this.areaList }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.success()
        } else {
          this.error(data)
        }
      })
      await this.findList()
    },
    async getCityList (levels, pid) {
      if (pid) {
        switch (levels) {
          case '400': pid = pid.substring(0, 6)
            await getGasWarnerAreaList({ levels: '500', pid: pid }).then(ret => {
              let data = ret.data
              if (data.errcode === 0) {
                this.$data['cityList' + '500'] = data.data
              } else {
                this.error(data)
              }
            })
            break
          case '500': pid = pid.substring(0, 9)
            break
        }
      }
      await getGasWarnerAreaList({ levels: levels, pid: pid }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.$data['cityList' + levels] = data.data
        } else {
          this.error(data)
        }
      })
    },
    update (row) {
      this.row = row
      this.area.id300 = ''
      this.area.id400 = ''
      this.areaList = []
      this.getCityList('300', null)
      this.getCityList('400', null)
      this.getCityList('500', null)
      this.getAreaBindList(row.code)
      this.modal.title = '绑定管理'
      this.modal.show = true
    },
    async getAreaBindList (company_code) {
      await getAreaBindList({ company_code: company_code }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.areaList = data.data
        } else {
          this.error(data)
        }
      })
    },
    checkColumnMethod ({ column }) {
      if (column.property === 'name') {
        return false
      }
      return true
    },
    async findList () {
      this.tableLoading = true
      await getAreaList().then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.tableLoading = false
          this.originData = this.$common.xeUtils.clone(this.$common.toTree(data.data, 'children', 'id', 'parent_id'), true)
          this.handleSearch(data.data)
        } else {
          this.error(data)
          this.tableLoading = false
        }
      })
    },
    handleSearch (data) {
      // 搜索
      this.tableLoading = true
      let filterName = this.$common.xeUtils.toString(this.filterName).trim()
      if (filterName) {
        let options = { children: 'children' }
        let searchProps = ['name']
        this.tableData = this.$common.xeUtils.searchTree(this.originData, item => searchProps.some(key => this.$common.xeUtils.toString(item[key]).indexOf(filterName) > -1), options)
        this.tableLoading = false
        // 搜索之后默认展开所有子节点
        this.$nextTick(() => {
          this.$refs.xTree.setAllTreeExpansion(true)
        })
      } else {
        this.tableData = this.originData
        this.tableLoading = false
      }
    },
    success () {
      this.$Message.success('操作成功')
    },
    error (data) {
      this.$Message.error({
        content: '操作失败,\n' + data.errmsg
      })
    }
  },
  watch: {}
}
</script>

<style scoped>
    .actionBtn {
        margin-right: 5px;
        margin-bottom: 5px;
    }
</style>
